<template>
  <div class="flow-start-container">
    <div class="com-box">
      <div class="com-box-title">
        <span>常用流程</span>
        <a-input
          v-model:value="comSearch"
          allowClear
          style="width: 200px"
          placeholder="请输入关键词"
        ></a-input>
      </div>
      <div class="com-box-content">
        <div
          v-if="computedComData.length"
          class="com-box-content-item"
          v-for="(_item, _index) in computedComData"
          @click="startTask(_item.PROCESS_KEY, _item.NAME_)"
          :style="{ background: colorList[_index % colorList.length] }"
          :key="_index"
        >
          {{ _item.NAME_ }}
        </div>
        <div v-else class="noBox">
          <WalletOutlined class="text-20px mr-10px" />
          <span>没有流程类型</span>
        </div>
      </div>
    </div>
    <div class="all-flow-container">
      <div class="custom-tab">
        <div class="title">全部流程</div>
        <ul class="custom-tab-content">
          <li
            class="custom-tab-item"
            :class="{ 'is-active': currentFlowSortId === -1 }"
            @click="handleFlowSortChoose(-1)"
            >全部</li
          >
          <li
            :id="item.id"
            class="custom-tab-item"
            :class="{ 'is-active': currentFlowSortId === item.sortId }"
            v-for="item in flowSortData"
            :key="item.sortId"
            @click="handleFlowSortChoose(item.sortId)"
            >{{ item.sortName }}</li
          >
        </ul>
      </div>
      <div class="custom-tab-container">
        <div v-for="(item, index) in flowSortData" :key="index" class="custom-tab-block">
          <template v-if="currentFlowSortId === item.sortId || currentFlowSortId === -1">
            <p class="title">{{ item.sortName }}</p>
            <a-row :gutter="20" class="custom-tab-block-content">
              <a-col
                :sm="8"
                :lg="6"
                :xl="4"
                v-for="(f, findex) in getFlowList(item.sortId)"
                :key="f.procDefId"
              >
                <div class="custom-tab-block-item" @click="startTask(f.procDefId, f.name)">
                  <div
                    class="img"
                    :style="{ background: colorList[(index + findex) % colorList.length] }"
                  ></div>
                  <span class="name">{{ f.name }}</span>
                </div>
              </a-col>
            </a-row>

            <div v-for="(x, i) in item.children" :key="i">
              <p class="subtitle">{{ x.sortName }}</p>
              <a-row :gutter="20" class="custom-tab-block-content">
                <a-col
                  :sm="8"
                  :lg="8"
                  :xl="6"
                  v-for="(f, findex) in getFlowList(x.sortId)"
                  :key="f.procDefId"
                >
                  <div class="custom-tab-block-item" @click="startTask(f.procDefId, f.name)">
                    <div
                      class="img"
                      :style="{ background: colorList[(i + findex) % colorList.length] }"
                    ></div>
                    <span class="name">{{ f.name }}</span>
                  </div>
                </a-col>
              </a-row>
            </div>
          </template>
        </div>
      </div>
    </div>
    <a-drawer
      v-if="showDrawer"
      @close="handleDrawClose"
      class="startFlowDrawer"
      width="100%"
      height="95%"
      v-model:open="showDrawer"
      :closable="false"
      placement="bottom"
      destroyOnClose
      :title="null"
    >
      <reviewPage
        v-if="showDrawer"
        :previewFormObj="previewFormObj"
        :previewConfig="previewConfig"
        @cancel="handleCancel"
      ></reviewPage>
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, h, computed } from 'vue';
  import { WalletOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import { getCommonFlowList } from '@/api/flow/index';
  import { getFlowSortList } from '@/api/flow/sort';
  import reviewPage from '@/components/business/flowReview/reviewPagecopy.vue';
  import { getFormJSON } from '@/api/flow/index';

  defineOptions({
    name: 'FlowStart',
  });

  const colorList = ['#3D96F9', '#F5B658', '#42DDA9', '#B48BE4', '#C55A5A'];

  const comData: any = ref([]);

  const comSearch = ref('');

  const computedComData = computed(() => {
    return comData.value.filter((item) => item.name_.indexOf(comSearch.value) > -1);
  });

  const flowList: any = ref([]);

  // 获取常用数据
  const loadComData = async () => {
    const data = await getCommonFlowList();
    //comData.value = data.result?.commProceList ?? [];
    flowList.value = data.result?.flowList ?? [];
  };
  loadComData();

  const flowSortData: any = ref([]);

  const currentFlowSortId = ref<number>(-1);
  const handleFlowSortChoose = (id) => {
    currentFlowSortId.value = id;
  };
  // 获取分类数据
  const loadSortList = async () => {
    const data = await getFlowSortList();
    flowSortData.value = data?.result ?? [];
  };
  loadSortList();

  const getFlowList = (id) => {
    const flowRows = flowList.value.filter((item) => item?.sortId === id);
    return flowRows && flowRows.length ? flowRows[0]?.flowList : [];
  };

  // 预览表单参数
  const previewFormObj = reactive<any>({
    itemList: [],
    formConf: {},
    dataJson: {},
    dataPower:[]
  });

  // 流程参数
  const previewConfig = reactive({
    form_url: '',
    form_type: '',
    isDraft:ref(true),
    processName: '',
    processDefinitionId: '',
    taskid: '',
    bid: '',
    procinstid: '',
    dataJson: {},
  });

  const showDrawer = ref(false);
  const handleDrawClose = () => {
    showDrawer.value = false;
  };

  // 开始流程
  const startTask = async (id, name) => {
    if (id == '') {
      message.error('没有找到流程processKey，请联系管理员');
      return;
    }
    // previewConfig.processName = name;
    // previewConfig.processDefinitionId = id;
    // previewConfig.taskid='';
    // showDrawer.value = true;

    const res: any = await getFormJSON({ processkey: id, taskid: '' });
    if (res.error == '200') {
      if (!res.result || Object.keys(res.result).length == 0) {
        message.error('无数据');
        return;
      }
      const mapJSON = JSON.parse(res.result.mapJson);
      previewConfig.processName = name;
      previewConfig.processDefinitionId = id;
      previewFormObj.itemList = mapJSON.list ?? [];
      previewFormObj.formConf = mapJSON.config ?? {};
      previewFormObj.dataPower=JSON.parse(res.result.dataPower);
      previewConfig.form_url = res.result.form_url;
      previewConfig.form_type = res.result.form_type;
      console.log(previewConfig,"previewConfig1111")
      console.log(previewFormObj,"previewFormObj2222")
      showDrawer.value = true;
    } else {
      message.error(res.result);
    }
  };

  // 关闭
  const handleCancel = () => {
    showDrawer.value = false;
    previewConfig.taskid='';
    previewConfig.processDefinitionId='';
  };
</script>
<style lang="less">
  .startFlowDrawer .ant-drawer-body {
    padding: 10px !important;
  }

  .startFlowDrawer :deep(.ant-drawer-header-title) {
    flex-direction: row-reverse;
  }
</style>
<style lang="less" scoped>
  @import '@/styles/navTheme.less';
  @classBacks: all-flow-container, com-box;

  .themeSetStyle(@classBacks, background-color, sec-back);

  .themeSetStyle(@classBacks, color, wb-text);

  .flow-start-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .noBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px;
    background: rgba(#000, 0.03);
    font-size: 14px;
  }

  .com-box {
    margin-bottom: 16px;
    padding: 10px 16px;
    background-color: #fff;

    &-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      font-size: 16px;
    }

    &-content {
      width: 100%;
      overflow: auto hidden;
      white-space: nowrap;

      &-item {
        display: inline-block;
        box-sizing: border-box;
        width: 250px;
        height: 100px;
        margin-right: 10px;
        margin-bottom: 10px;
        border-radius: 4px;
        color: #fff;
        font-size: 16px;
        line-height: 100px;
        text-align: center;
        cursor: pointer;

        &:last-of-type {
          margin-right: 0;
        }

        &:hover,
        &.is-active {
          box-shadow:
            0 2px 7px 0 rgb(0 0 0 / 32%),
            0 1px 4px 0 rgb(183 183 183 / 6%);
        }
      }
    }
  }

  .all-flow-container {
    display: flex;
    flex: 1;
    padding: 15px 20px;
    background-color: #fff;

    .custom-tab {
      flex-grow: 0;
      margin-right: 35px;

      .title {
        font-size: 16px;
        font-weight: 500;
      }

      .custom-tab-content {
        padding: 0;
        list-style-type: none;

        .custom-tab-item {
          min-width: 100px;
          height: 43px;
          border-bottom: 1px solid #e8e8e8;
          font-size: 14px;
          line-height: 43px;
          text-align: center;
          cursor: pointer;

          &.is-active {
            border-bottom: 2px solid #1890ff;
            color: #1890ff;
          }
        }
      }
    }

    .custom-tab-container {
      flex-grow: 1;
      overflow-y: auto;

      .custom-tab-block {
        box-sizing: border-box;

        .title {
          margin: 10px 0 20px;
          font-size: 16px;
          font-weight: 500;
          text-decoration: underline double #1890ff;
          text-decoration-thickness: initial;
        }

        .subtitle {
          font-size: 16px;
          font-weight: 500;
        }

        .custom-tab-block-content {
          box-sizing: border-box;
          width: 100%;

          .custom-tab-block-item {
            display: flex;
            box-sizing: border-box;
            align-items: center;
            height: 70px;
            margin-bottom: 20px;
            padding: 0 20px;
            border: 1px solid #dee0e3;
            border-radius: 6px;
            font-size: 15px;
            font-weight: 500;
            line-height: 70px;
            text-align: left;
            cursor: pointer;

            &:hover {
              border-color: #1890ff;
              color: #1890ff;
            }

            .img {
              display: inline-block;
              width: 34px;
              height: 34px;
              margin-right: 10px;
              border-radius: 4px;
              color: #fff;
              line-height: 34px;
              text-align: center;
              vertical-align: middle;
            }

            .name {
              display: inline-block;
              flex: 1;
              line-height: 18px;
              word-wrap: break-word;
              word-break: break-all;
            }
          }
        }
      }
    }
  }
</style>
